<template>
	<div class="mode5-box">
		<div class="header flex-center">
			<div class="option-list" :class="{ two: activeType === 'md' }">
				<div class="option flex-center" @click="switchOption('dir')" :class="{ active: activeType === 'dir' }">
					文件夹
				</div>
				<div class="option flex-center" @click="switchOption('md')" :class="{ active: activeType === 'md' }">
					文档
				</div>
				<div class="slider"></div>
			</div>
		</div>

		<div class="body scroll">
			<template v-if="activeType === 'dir'">
				<folder v-for="item in imageCitationInfo.dirInfo" :key="item.dirPath" :path="item.dirPath">
					<image-file
						v-for="image in item.citationInfo"
						:key="image.filename"
						:data="image"
						@delete="deleteFile(image.fullPath)"></image-file>
				</folder>
			</template>
			<template v-else>
				<div class="md-item" v-for="item in imageCitationInfo.mdInfo" :key="item.filePath">
					<div class="title" :title="item.filePath">
						<i class="flex-center iconfont icon-file-markdown"></i>
						<span>{{ item.filename }}</span>
					</div>
					<template v-if="item.dirInfo.length > 0">
						<folder
							v-for="dirInfo in item.dirInfo"
							:key="dirInfo.dirPath"
							:path="dirInfo.dirPath"
							:model-value="false">
							<image-file
								v-for="image in dirInfo.citationInfo"
								:key="image.filename"
								:data="image"
								:root-reference-path="item.filePath"
								@delete="deleteFile(image.fullPath)"></image-file>
						</folder>
					</template>
					<template v-else>
						<div class="not">文档中没有引用本地图片</div>
					</template>
				</div>
			</template>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { API } from '@v/utils/API';
import { ElMessageBox } from 'element-plus';
import { useMode5Store } from '@v/store/mode/mode5';
import { ImageCitationInfo } from '@p/main-windowObject';
import folder from './folder.vue';
import imageFile from './image-file.vue';

const mode5Store = useMode5Store();

type ActiveType = 'dir' | 'md';
let activeType = ref<ActiveType>('dir');
// 切换选项
function switchOption(type: ActiveType) {
	activeType.value = type;
}

// 图片引用信息
const imageCitationInfo = computed(() => {
	if (mode5Store.imageCitationInfo) {
		return mode5Store.imageCitationInfo;
	} else {
		const obj: ImageCitationInfo = {
			mdFileInfoList: [],
			dirInfo: [],
			mdInfo: [],
		};
		return obj;
	}
});

// 删除文件
function deleteFile(path: string) {
	ElMessageBox.confirm(`确定删除此文件吗？此操作不可逆！\n"${path}"`, '提示', {
		confirmButtonText: '确定删除',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		API.invoke('delete-file', path).then(() => {
			mode5Store.removeDirInfoImageItem(path);
		});
	});
}
</script>

<style scoped lang="scss">
.mode5-box {
	width: 500px;
	max-width: 100%;
	height: 100%;
	background-color: var(--fill-color-5);
	--option-width: 80px;
	--option-height: 30px;
	--option-list-padding: 6px;
	.header {
		padding: 8px 0;
		.option-list {
			display: flex;
			position: relative;
			padding: var(--option-list-padding);
			background-color: var(--opacity-purity-color-6);
			width: calc(var(--option-width) * 2 + 4px * 2);
			border-radius: 4px;
			margin: 4px 0;
			.option {
				width: var(--option-width);
				height: var(--option-height);
				font-size: 14px;
				cursor: pointer;
				position: relative;
				z-index: 99;
				&:hover {
					color: var(--theme-main-color);
				}
				&.active {
					color: var(--theme-main-color);
				}
			}
			.slider {
				background-color: var(--opacity-purity-color-6);
				width: var(--option-width);
				height: var(--option-height);
				position: absolute;
				top: var(--option-list-padding);
				left: var(--option-list-padding);
				border-radius: 4px;
				transition: 200ms;
			}
			&.two > .slider {
				left: calc(var(--option-list-padding) + var(--option-width));
			}
		}
	}
	.body {
		width: calc(100% - 20px);
		margin: 0 10px;
		height: calc(100% - 66px);
		.md-item {
			border: 1px solid var(--border-color-4);
			border-radius: 4px;
			margin-bottom: 10px;
			:last-child {
				margin-bottom: 0;
			}
			.title {
				height: 32px;
				display: flex;
				align-items: center;
				font-size: 14px;
				i {
					color: var(--theme-main-color);
					width: 32px;
					height: 32px;
					font-size: 18px;
				}
			}
			.not {
				font-size: 14px;
				display: flex;
				align-items: center;
				height: 32px;
				padding-left: 33px;
				color: var(--text-color-3);
			}
		}
	}
}
</style>
